<template>
  <div class="add-product-wrapper">
    <el-form label-width="108px" :model="form" ref="form" :rules="rules">
      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>基本信息</span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="新闻标题" prop="title">
              <el-input
                v-model="form.title"
                placeholder="请输入商品名称"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="新闻标签" prop="souce">
              <el-select
                v-model="form.souce"
                placeholder="新闻标签"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.sys_news_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="新闻发布时间" prop="archiveMonth">
              <el-date-picker
                v-model="form.archiveMonth"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="发布时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="新闻头图" prop="img">
              <oss-image-upload
                v-model="form.img"
                :limit="1"
              ></oss-image-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="新闻内容" prop="content">
              <Editor
                v-model="form.content"
                placeholder="请输入新闻内容"
                type="url"
              ></Editor>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <div class="tc">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>
  
  <script>
import { getnews, addnews, updatenews } from "@/api/news/news";
export default {
  name: "AddNews",
  dicts: ["sys_news_type"],
  components: {},
  data() {
    return {
      rules: {
        title: [{ required: true, message: "请输入新闻标题", trigger: "blur" }],
        content: [
          { required: true, message: "请输入新闻内容", trigger: "blur" },
        ],
        // archiveMonth:[
        //   { required: true, message: "请选择新闻发布时间", trigger: "blur" },
        // ],
        souce: [{ required: true, message: "请选择新闻标签", trigger: "blur" }],
        img: [{ required: true, message: "请上传新闻图片", trigger: "blur" }],
      },
      form: {},
    };
  },
  watch: {
    // 监听路由对象本身
    $route(to, from) {
      // 检查参数的变化
      console.log("9999");
      if (to.query.id !== from.query.id) {
        // 参数发生变化时的处理逻辑
        if (to.query.id) {
          this.getInfo(to.query.id);
          this.form.goodId = to.query.goodId;
          this.form.name = to.query.goodName;
        } else {
          this.form.goodId = to.query.goodId;
          this.form.name = to.query.goodName;
          this.form = {};
        }
      }
    },
  },
  created() {
    this.form.goodId = this.$route.query.goodId;
    this.form.name = this.$route.query.goodName;
    const { id } = this.$route.query;
    if (id) {
      this.getInfo(id);
    }
  },
  methods: {
    getInfo(id) {
      getnews(id).then((response) => {
        let data = response;
        if (data.img) {
          if (data.img.indexOf(",") > -1) {
            data.img = data.img.split(",")[0];
          }
        }
        console.log(data);
        this.form = data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updatenews(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addnews(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
            });
          }
          this.cancel();
        } else {
          
        }
      });
    },
    cancel() {
      this.$tab.closeOpenPage({ path: "/performManagement/newsManageList?id="+this.$route.query.goodId+'&goodName='+this.$route.query.goodName});
    },
  },
};
</script>
  
  <style lang="stylus">
  .add-product-wrapper {
    padding: 12px;

    .content {
      margin: 0 auto;
      width: 75%;
      min-width: 800px;
    }

    .sku-wrapper {
      background-color: #f7f8fa;
      padding: 12px;

      .sku_sorts {
        .sku_sort {
          background-color: white;
          margin-bottom: 12px;

          .label {
            padding: 8px;
          }

          .values {
            padding: 8px 0 0 8px;
            border-top: 1px solid $border-color;
            display: flex;
            flex-wrap: wrap;

            .value {
              padding: 0 32px 8px 0;
              width: 200px !important;
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }

    .img-upload-mini .el-upload--picture-card {
      width: 48px;
      height: 48px;
      line-height: 57px;
    }
  }
</style>
  